import React, { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import { Text, Box, Cylinder, Sphere } from '@react-three/drei';
import { ProfileBubble } from '../ProfileBubble';
import type { DatingProfile } from '../../types';
import * as THREE from 'three';

interface LibrarySceneProps {
  profiles: DatingProfile[];
  onProfileClick: (profile: DatingProfile) => void;
}

export const LibraryScene: React.FC<LibrarySceneProps> = ({ profiles, onProfileClick }) => {
  const libraryRef = useRef<THREE.Group>(null);

  useFrame((state) => {
    if (libraryRef.current) {
      libraryRef.current.position.y = Math.sin(state.clock.elapsedTime * 0.3) * 0.06;
    }
  });

  const libraryProfiles = profiles.slice(3, 6);

  return (
    <group ref={libraryRef}>
      {/* Floor */}
      <Box
        position={[0, -0.5, 0]}
        args={[24, 1, 24]}
        receiveShadow
      >
        <meshLambertMaterial color="#D2B48C" />
      </Box>

      {/* Library Building */}
      <group position={[0, 4, -8]}>
        {/* Main Building */}
        <Box
          position={[0, 0, 0]}
          args={[12, 8, 5]}
          castShadow
          receiveShadow
        >
          <meshLambertMaterial color="#F5DEB3" />
        </Box>

        {/* Pillars */}
        {[-4, -2, 0, 2, 4].map((x, index) => (
          <Cylinder
            key={`pillar-${index}`}
            position={[x, -2, 2.6]}
            args={[0.3, 0.3, 4, 8]}
            castShadow
          >
            <meshLambertMaterial color="#FFFAF0" />
          </Cylinder>
        ))}

        {/* Library Sign */}
        <group position={[0, 5, 2.6]}>
          <Box args={[6, 1.2, 0.1]}>
            <meshLambertMaterial color="#FFFAF0" />
          </Box>
          <Text
            position={[0, 0, 0.1]}
            fontSize={0.4}
            color="#8B4513"
            anchorX="center"
            anchorY="middle"
          >
            静谧图书馆
          </Text>
        </group>

        {/* Windows */}
        {[-3, 0, 3].map((x, index) => (
          <Box
            key={`window-${index}`}
            position={[x, 1, 2.6]}
            args={[1.5, 3, 0.1]}
          >
            <meshLambertMaterial color="#87CEEB" opacity={0.7} transparent />
          </Box>
        ))}

        {/* Entrance */}
        <Box
          position={[0, -2.5, 2.6]}
          args={[2, 3, 0.1]}
        >
          <meshLambertMaterial color="#654321" />
        </Box>
      </group>

      {/* Bookshelves */}
      {[
        [-8, 0, -2, Math.PI / 2],
        [-8, 0, 2, Math.PI / 2],
        [8, 0, -2, -Math.PI / 2],
        [8, 0, 2, -Math.PI / 2],
        [-2, 0, 6, 0],
        [2, 0, 6, 0]
      ].map((position, index) => (
        <group
          key={`bookshelf-${index}`}
          position={[position[0], position[1], position[2]] as [number, number, number]}
          rotation={[0, position[3] as number, 0]}
        >
          {/* Shelf Structure */}
          <Box
            position={[0, 1.5, 0]}
            args={[0.3, 3, 4]}
            castShadow
            receiveShadow
          >
            <meshLambertMaterial color="#8B4513" />
          </Box>

          {/* Shelves */}
          {[0.5, 1.2, 1.9, 2.6].map((y, shelfIndex) => (
            <Box
              key={`shelf-${shelfIndex}`}
              position={[0, y, 0]}
              args={[0.32, 0.1, 4]}
              castShadow
            >
              <meshLambertMaterial color="#654321" />
            </Box>
          ))}

          {/* Books */}
          {[0.5, 1.2, 1.9, 2.6].map((shelfY, shelfIdx) => (
            <group key={`books-${shelfIdx}`} position={[0, shelfY + 0.15, 0]}>
              {Array.from({ length: 8 }, (_, bookIdx) => (
                <Box
                  key={`book-${bookIdx}`}
                  position={[0.05, 0, -1.8 + bookIdx * 0.45]}
                  args={[0.15, 0.3, 0.05 + Math.random() * 0.1]}
                  castShadow
                >
                  <meshLambertMaterial color={
                    ['#FF4500', '#32CD32', '#4169E1', '#FFD700', '#FF69B4', '#8A2BE2', '#00CED1', '#DC143C'][bookIdx]
                  } />
                </Box>
              ))}
            </group>
          ))}
        </group>
      ))}

      {/* Reading Tables */}
      {[
        [-4, 0, 0],
        [4, 0, 0],
        [0, 0, 3]
      ].map((position, index) => (
        <group key={`reading-table-${index}`} position={position as [number, number, number]}>
          {/* Table */}
          <Box
            position={[0, 0.8, 0]}
            args={[2.5, 0.1, 1.5]}
            castShadow
            receiveShadow
          >
            <meshLambertMaterial color="#DEB887" />
          </Box>

          {/* Table Legs */}
          {[[-1.1, -0.6], [1.1, -0.6], [-1.1, 0.6], [1.1, 0.6]].map((legPos, legIndex) => (
            <Cylinder
              key={`table-leg-${legIndex}`}
              position={[legPos[0], 0.4, legPos[1]]}
              args={[0.04, 0.04, 0.8, 8]}
              castShadow
            >
              <meshLambertMaterial color="#654321" />
            </Cylinder>
          ))}

          {/* Books on Table */}
          <group position={[0, 0.9, 0]}>
            <Box
              position={[-0.5, 0.02, -0.2]}
              args={[0.3, 0.04, 0.2]}
              castShadow
            >
              <meshLambertMaterial color="#8B0000" />
            </Box>
            <Box
              position={[0.3, 0.02, 0.1]}
              args={[0.25, 0.04, 0.18]}
              castShadow
            >
              <meshLambertMaterial color="#4169E1" />
            </Box>

            {/* Reading Lamp */}
            <Cylinder
              position={[0.8, 0.25, 0.4]}
              args={[0.02, 0.02, 0.5, 8]}
              castShadow
            >
              <meshLambertMaterial color="#654321" />
            </Cylinder>
            <Cylinder
              position={[0.8, 0.55, 0.4]}
              args={[0.15, 0.08, 0.1, 16]}
              castShadow
            >
              <meshLambertMaterial color="#228B22" />
            </Cylinder>
            <Sphere
              position={[0.8, 0.58, 0.4]}
              args={[0.05]}
            >
              <meshLambertMaterial color="#FFFACD" emissive="#FFFACD" emissiveIntensity={0.4} />
            </Sphere>
          </group>

          {/* Chairs */}
          {[
            [-1.8, 0, 0],
            [1.8, 0, 0]
          ].map((chairPos, chairIndex) => (
            <group key={`chair-${chairIndex}`} position={chairPos as [number, number, number]}>
              {/* Seat */}
              <Box
                position={[0, 0.45, 0]}
                args={[0.45, 0.05, 0.45]}
                castShadow
              >
                <meshLambertMaterial color="#8B4513" />
              </Box>
              {/* Back */}
              <Box
                position={[0, 0.8, -0.2]}
                args={[0.45, 0.7, 0.05]}
                castShadow
              >
                <meshLambertMaterial color="#8B4513" />
              </Box>
              {/* Legs */}
              {[[-0.2, -0.2], [0.2, -0.2], [-0.2, 0.2], [0.2, 0.2]].map((legPos, legIdx) => (
                <Cylinder
                  key={`chair-leg-${legIdx}`}
                  position={[legPos[0], 0.225, legPos[1]]}
                  args={[0.02, 0.02, 0.45, 8]}
                  castShadow
                >
                  <meshLambertMaterial color="#654321" />
                </Cylinder>
              ))}
            </group>
          ))}
        </group>
      ))}

      {/* Computer Desks */}
      <group position={[0, 0, -4]}>
        <Box
          position={[0, 0.8, 0]}
          args={[8, 0.1, 1.2]}
          castShadow
          receiveShadow
        >
          <meshLambertMaterial color="#DEB887" />
        </Box>

        {/* Computer Monitors */}
        {[-2.5, -0.8, 0.8, 2.5].map((x, index) => (
          <group key={`computer-${index}`} position={[x, 0, 0]}>
            <Box
              position={[0, 1.2, -0.4]}
              args={[0.5, 0.35, 0.05]}
              castShadow
            >
              <meshLambertMaterial color="#000000" />
            </Box>
            <Box
              position={[0, 1.18, -0.38]}
              args={[0.45, 0.3, 0.02]}
            >
              <meshLambertMaterial color="#87CEEB" emissive="#87CEEB" emissiveIntensity={0.2} />
            </Box>
            <Cylinder
              position={[0, 0.95, -0.2]}
              args={[0.03, 0.03, 0.2, 8]}
              castShadow
            >
              <meshLambertMaterial color="#696969" />
            </Cylinder>
          </group>
        ))}

        {/* Keyboards */}
        {[-2.5, -0.8, 0.8, 2.5].map((x, index) => (
          <Box
            key={`keyboard-${index}`}
            position={[x, 0.82, 0.2]}
            args={[0.4, 0.02, 0.15]}
            castShadow
          >
            <meshLambertMaterial color="#2F2F2F" />
          </Box>
        ))}
      </group>

      {/* Potted Plants */}
      {[
        [-10, 0, -6],
        [10, 0, -6],
        [-10, 0, 6],
        [10, 0, 6]
      ].map((position, index) => (
        <group key={`plant-${index}`} position={position as [number, number, number]}>
          <Cylinder
            position={[0, 0.3, 0]}
            args={[0.4, 0.3, 0.6, 8]}
            castShadow
            receiveShadow
          >
            <meshLambertMaterial color="#8B4513" />
          </Cylinder>
          <Sphere
            position={[0, 0.8, 0]}
            args={[0.6]}
            castShadow
          >
            <meshLambertMaterial color="#228B22" />
          </Sphere>
        </group>
      ))}

      {/* Floating Knowledge Symbols */}
      {Array.from({ length: 8 }, (_, i) => (
        <group
          key={`symbol-${i}`}
          position={[
            (Math.random() - 0.5) * 20,
            3 + Math.random() * 2,
            (Math.random() - 0.5) * 20
          ]}
        >
          <Text
            fontSize={0.4}
            color="#4169E1"
            anchorX="center"
            anchorY="middle"
          >
            {['📚', '✏️', '🔬', '🎓', '💡'][i % 5]}
          </Text>
        </group>
      ))}

      {/* Profile Bubbles */}
      {libraryProfiles.map((profile, index) => {
        const positions: [number, number, number][] = [
          [-4, 2, 0],
          [4, 2, 0],
          [0, 2, 3]
        ];
        
        return (
          <ProfileBubble
            key={profile.id}
            profile={profile}
            position={positions[index]}
            onClick={() => onProfileClick(profile)}
            color="#9370DB"
          />
        );
      })}
    </group>
  );
};